<template>
	<div style='background:#fff;padding:50px;'>
		<p class='notice-title'>全部消息</p>
		<div style='margin-top: 25px'>
			<button class='btn-sign' @click='btnSign'>标记已读</button>
			<button class='btn-del' @click='btnDel'>删除</button>
		</div>
		<div style='background: #fff;margin-top: 30px'>
			<Table :columns="noticeList" :data="noticeData" stripe @on-selection-change='selectData'></Table>
		</div>
	</div>
</template>

<script type="text/javascript">
	export default{
		data(){
  			return{
            noticeList:[
              	{
              		type:'selection',
              		width:'70'
                },
              	{
                	title:'时间',
                	key:'created_at',
                	width:'170',
                	render:(h,params)=>{
                		return h('span',this.format(params.row.created_at))
                	}
                },
                {
              		title:'类型',
                	key:'title',
                	width:'170',
                	render:(h,params)=>{
                		return h('span',params.row.notice.title)
                	}
                },
                {
              		title:'消息内容',
                	key:'content',
                	render:(h,params)=>{
                		return h('span',{
                			style:{
                				fontWeight:params.row.status ? 'normal' : 'bold'
                			},
                			on:{
                				click:()=>{
                					this.noticeSign(params.row)
                				}
                			}
                		},params.row.notice.content)
                	}
                }
              ],
              noticeData:[],
              selection:[]
  			  }
  		},
  		created(){
          this.getData();
  		},
      methods:{
          getData(){
              this.fetch('/home/notice').then(res=>{
                  if(res&&res.data.code&&res.data.data.length){
                      this.noticeData = res.data.data;
                      let unread = [];
                      for(let key in this.noticeData){
                          if(this.noticeData[key].status == 0){
                          	unread.push(this.noticeData[key].id)
                              
                          }
                      }

                      if(unread.length){
                      	this.$bus.emit('showDot',true)
                      }else{
                      	this.$bus.emit('showDot',false)
                      }
                  }
              })
          },

          noticeSign(row){
              if(row.status==0){
                  this.fetch('/home/notice/'+row.id).then(res=>{
                      if(res&&res.data.data){
                          this.getData()
                      }
                  })
              }
          },
          selectData(selection){
          	this.selection = selection;
          },
          //标记已读
          btnSign(){
          	if(!this.selection.length){
          		return
          	}
          	let arr = [];
          	for(let key in this.selection){
          		arr.push(this.selection[key].id)
          	}
          	 this.fetch('/home/notice/'+arr.join()).then(res=>{
                  if(res&&res.data.data){
                      this.getData();
                      this.selection = []
                  }
              })
          },
          btnDel(){
          	if(!this.selection.length){
          		return
          	}
          	let arr = [];
          	for(let key in this.selection){
          		arr.push(this.selection[key].id)
          	}

            this.$Modal.confirm({
                title: '提示',
                content: '<p>确定删除吗？</p>',
                onOk: () => {
                    this.fetch('/home/notice/delete/'+arr.join()).then(res=>{
                        if(res&&res.data.data){
                          this.$Message.success('删除成功')
                            this.getData();
                            this.selection = []
                        }
                    })
                }
            });
          	 

          }
          
      }
	}
</script>
<style scoped>
	.notice-title{
		font-size:16px;
		color:#464C5B;
		font-weight: 700;
		margin-bottom: 30px;
	}
   .btn-sign{
   		width: 90px;
   		height: 32px;
   		line-height: 32px;
   		border-radius: 3px;
   		background: rgb(6, 160, 253);
   		border:1px solid #06A0FD;
   		color:#fff;
   		margin-right: 10px;
   }
   .btn-sign:hover{
   		background: rgba(6, 160, 253,0.9);
   }
   .btn-del{
   		width: 90px;
   		height: 32px;
   		line-height: 32px;
   		border-radius: 3px;
   		border:1px solid #06A0FD;
   		background: #fff;
   		color:#06A0FD;
   }
   .btn-del:hover{
   		border:1px solid rgba(6, 160, 253, .8);
   		color:rgba(6, 160, 253, .8);
   }
</style>